<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            outline: 1px solid red;
            width: 500px;
            height: 400px;
        }
        #container header {
            height: 40px;
            border-bottom: 1px solid black;
            position: relative;
        }
        .tab {
            height: 40px;
            width: 80px;
            border-right: 1px solid black;
            float: left;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        .tab.active {
            border-bottom: 1px solid white;
        }
        .tab button {
            position: absolute;
            top: 4px;
            right: 4px;
        }
        header>button {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="container">
        <header>
            <div class="tab">
                1
                <button>x</button>
            </div>
            <div class="tab active">
                2
                <button>x</button>
            </div>
            <div class="tab">
                3
                <button>x</button>
            </div>

            <button>新增</button>
        </header>
    </div>

    <script>

        class Tab {
            constructor (id) {
                // 元素 element
                this.el = document.querySelector('#container');
                // tab的复数
                this.tabs = document.querySelectorAll('#container .tab');
            }
            init () {
                for (var i = 0; i < this.tabs.length; i++) {
                    ((i) => {
                        this.tabs[i].addEventListener('click', function () {
                            console.log(i); // 3
                        });
                    })(i);
                }
            }
        }

        const tabInstance = new Tab('container');
        tabInstance.init();

    </script>
</body>
</html>